<template>
	<view>
		<image class="integral-role-header" :src="statics.integralRoleHeader"></image>
		<view class="toptitle">{{$t('task.subtitle')}}</view>
		<view class="integral-role-main pd16_15">
			<view class="box pd16_15">
				<view class="flex alcenter space pb16 bd-bottom mb16">
					<view class="flex alcenter">
						<image :src="statics.integralRoleImg[0]" style="width: 100rpx;height: 100rpx;"></image>
						<view class="ml15">
							<view class="ft14 ftw600">{{$t('task.reg')}}</view>
							<view class="flex alcenter mt12">
								<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
								<view class="ft12 cl-notice ml5">{{$t('task.reward')}} {{reggive}} {{score_name}}</view>
							</view>
						</view>
					</view>
					<view class="btn-small" :style="getBtnDisStyle">{{$t('task.complete')}}</view>
				</view>
				<view class="flex alcenter space pb16 bd-bottom mb16">
					<view class="flex alcenter">
						<image :src="statics.integralRoleImg[1]" style="width: 100rpx;height: 100rpx;"></image>
						<view class="ml15">
							<view class="ft14 ftw600">{{$t('task.invitereg')}}</view>
							<view class="flex alcenter mt12">
								<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
								<view class="ft12 cl-notice ml5">{{$t('task.reward')}} {{invitereg_give}} {{score_name}}
								</view>
							</view>
						</view>
					</view>
					<button open-type="share" @click="goshare()" class="btn-small"
						:style="getBtnRoleStyle">{{$t('task.todo')}}</button>
				</view>
				<!-- #ifndef H5 -->
				<view class="flex alcenter space pb16 bd-bottom mb16" v-if="videoad_open==1">
					<view class="flex alcenter">
						<image :src="statics.integralRoleImg[3]" style="width: 100rpx;height: 100rpx;"></image>
						<view class="ml15">
							<view class="ft14 ftw600">{{$t('task.videoad')}}</view>
							<view class="flex alcenter mt12">
								<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
								<view class="ft12 cl-notice ml5">{{$t('task.reward')}} {{admoney}}
									{{score_name}}({{adnum}}/{{mrcs}})</view>
							</view>
						</view>
					</view>
					<view @click="adClick()" v-if="adnum < mrcs" class="btn-small" :style="getBtnRoleStyle">
						{{$t('task.todo')}}</view>
					<view @click="adClick()" v-else class="btn-small" :style="getBtnDisStyle">{{$t('task.complete')}}
					</view>
				</view>
				<!-- #endif -->
				<view class="flex alcenter space pb16 bd-bottom mb16">
					<view class="flex alcenter">
						<image :src="statics.integralRoleImg[5]" style="width: 100rpx;height: 100rpx;"></image>
						<view class="ml15">
							<view class="ft14 ftw600">{{$t('task.taplove')}}</view>
							<view class="flex alcenter mt12">
								<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
								<view class="ft12 cl-notice ml5">{{$t('task.reward')}} {{taplove_score}}
									{{score_name}}({{taplove_num}}/{{taplove_times}})</view>

							</view>
						</view>
					</view>
					<navigator url="/pages/client/video/video" open-type="switchTab" v-if="taplove_num<taplove_times">
						<view class="btn-small" :style="getBtnRoleStyle">{{$t('task.todo')}}</view>
					</navigator>
					<view class="btn-small" v-else :style="getBtnDisStyle">{{$t('task.complete')}}</view>
				</view>
				<view class="flex alcenter space pb16 ">
					<view class="flex alcenter">
						<image :src="statics.integralRoleImg[4]" style="width: 100rpx;height: 100rpx;"></image>
						<view class="ml15">
							<view class="ft14 ftw600">{{$t('task.signin')}}</view>
							<view class="flex alcenter mt12">
								<image :src="statics.integralImg01" style="width: 32rpx; height: 32rpx;"></image>
								<view class="ft12 cl-notice ml5">{{$t('task.reward')}} {{tdsy}} {{score_name}}</view>
							</view>
						</view>
					</view>
					<view class="btn-small" v-if="!jrqd" @click="qiandao()" :style="getBtnRoleStyle">{{$t('task.todo')}}
					</view>
					<view class="btn-small" v-else :style="getBtnDisStyle">{{$t('task.complete')}}</view>
				</view>
			</view>
		</view>
		<pop ref="qdpop" direction="center" :is_close="true" :is_mask="true" :width="90" height="fit-content"
			:maskFun="false">
			<view style="margin: 50rpx 30rpx;">
				<siginIn :sign_list="sign_list" :qdjl="qddays" :tdsy="tdsy" @cksigin="cksigin"></siginIn>
			</view>
		</pop>
	</view>
</template>

<script>
	import pop from "@/components/ming-pop/ming-pop.vue";
	import siginIn from '@/components/fanxiao-sign/sigin-in.vue';
	var rewardedVideoAd
	export default {
		data() {
			return {
				score_name: this.$t('Score'),
				uid: '',
				reggive: 0,
				invitereg_give: 0,
				videoad_open: 0,
				admoney: 0,
				mrcs: 0,
				adnum: 0,
				taplove_score: 0,
				taplove_times: 0,
				taplove_num: 0,
				qddays: '',
				tdsy: 0,
				jrqd: false,
				sign_list: [],
				adpid: '',
				mpadid: '',
			}
		},
		components: {
			pop,
			siginIn
		},
		computed: {
			getBtnRoleStyle() {
				let style = 'background: linear-gradient(270deg, #FFAD03 0%, #FEC905 100%);;color:#ffffff;';
				return style;
			}
		},
		onLoad() {
			if (uni.getStorageSync("userinfo").id) {
				this.uid = uni.getStorageSync("userinfo").id
				this.taplove_num = uni.getStorageSync("userinfo").tap_count
				this.adnum = uni.getStorageSync("userinfo").ad_count
			}
			var config = uni.getStorageSync("config")
			this.reggive = config.site.reggive
			this.invitereg_give = config.site.invitereg_give
			this.videoad_open = config.site.videoad_open
			this.admoney = config.site.admoney
			this.mrcs = config.site.mrcs

			this.taplove_score = config.site.taplove_score
			this.taplove_times = config.site.taplove_times

			this.adpid = config.site.appad.adpid; //app奖励广告adpid
			this.mpadid = config.site.mpad.videoAd //微信激励广告videoAd

			this.signlist();
		},
		onReady() {
			// #ifndef H5
			this._isLoaded = false
			rewardedVideoAd = uni.createRewardedVideoAd({
				adpid: this.adpid,
				adUnitId: this.mpadid,
				urlCallback: { // 服务器回调透传参数
					userId: this.uid,
					extra: 'testdata'
				}
			})
			rewardedVideoAd.onLoad(() => {
				this._isLoaded = true
				console.log('onLoad event')
				// 当激励视频被关闭时，默认预载下一条数据，加载完成时仍然触发 `onLoad` 事件
			})
			rewardedVideoAd.onError((err) => {
				console.log('onError event', err)
			})
			rewardedVideoAd.onClose(res => {
				// 用户点击了【关闭广告】按钮
				if (res && res.isEnded) {
					// 正常播放结束
					this.adjiangli()
				} else {
					// 播放中途退出
				}
			})
			// #endif
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('task.title')
			});
		},
		methods: {
			async loadUser() {
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				let [err, res] = await this.$httpas.get('/api/user/index', data);
				if (res.data.code == 1) {
					let uinfo = res.data.data
					uni.setStorage({ //缓存配置信息
						key: 'userinfo',
						data: uinfo
					})
					this.taplove_num = uinfo.tap_count
					this.adnum = uinfo.ad_count
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			goshare() {
				// #ifndef MP
				uni.navigateTo({
					url: '/pages/fenxiao/qrshare'
				})
				// #endif
			},
			qiandao() {
				this.$refs.qdpop.show();
			},
			cksigin() {
				this.signlist();
			},
			async signlist() {
				let this_ = this
				let data = {};
				if (uni.getStorageSync("userinfo")) {
					data.token = uni.getStorageSync("userinfo").token
					data.uid = uni.getStorageSync("userinfo").id
				}
				let [err, res] = await this.$httpas.get('/api/user/signlist', data);
				if (res.data) {
					this.sign_list = res.data.getweek
					this.qddays = res.data.qddays_text
					this.tdsy = res.data.tdsy
					this.jrqd = res.data.jrqd
				}
			},
			//视频奖励
			async adjiangli() {
				var this_ = this
				let data = {};
				if (uni.getStorageSync("userinfo").token) {
					data.token = uni.getStorageSync("userinfo").token
					data.uid = uni.getStorageSync("userinfo").id
				}
				let [err, res] = await this.$httpas.get('/api/user/admoney', data);
				if (!this.$httpas.errorCheck(err, res)) return;
				if (res.data.code === 1) {
					uni.showModal({
						title: this.$t('Warning'),
						content: this.$t('Operation completed'),
						showCancel: true,
						confirmText: this.$t('OK'),
						success: function(ress) {
							if (ress.confirm) {
								this_.loadUser()
							}
						}
					});
				} else {
					uni.showToast({
						title: this.$t('Operation failed'),
						icon: "none"
					});
				}
			},
			adClick() {
				var adnumleft = this.mrcs - this.adnum
				if (adnumleft <= 0) {
					uni.showModal({
						title: this.$t('Warning'),
						content: this.$t('task.daynumtip') + this.mrcs,
						showCancel: false,
						confirmText: this.$t('OK'),
						success: function(res) {

						}
					});
					return false;
				}
				if (this._isLoaded) {
					rewardedVideoAd.show()
						.catch(() => {
							rewardedVideoAd.load()
								.then(() => rewardedVideoAd.show())
								.catch(err => {
									console.log('激励视频 广告显示失败')
								})
						})
				}
			},
		}
	}
</script>

<style>
	.integral-role-header {
		position: relative;
		width: 100%;
		height: 400rpx;
	}

	.toptitle {
		position: absolute;
		top: 60rpx;
		left: 40rpx;
		width: 55%;
		font-size: 48rpx;
		color: white;
		font-weight: 400;
		color: #563010;
		line-height: 1;
	}

	.integral-role-main {
		position: relative;
		width: 100%;
		margin-top: -192rpx;
	}
</style>